<template>
  <div id="suppliers" class="card col-12 px-0 mt-5">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb pb-0">
        <li class="breadcrumb-item ms-1">系统管理</li>
        <li class="breadcrumb-item active" aria-current="page">供应商</li>
        <li class="breadcrumb-item ms-auto" aria-current="page">
          <router-link to="/h5/paymentTypes">支付方式</router-link>
        </li>
      </ol>
    </nav>
    <template v-if="isSearchMode">
      <div class="card-body">
        <form>
          <div class="row mb-2">
            <input
              type="text"
              class="form-control"
              size="8"
              placeholder="名称"
              v-model.trim="name0"
            />
          </div>
          <div class="row mb-2">
            <select class="form-select ms-1" v-model.number="supplierType0">
              <option value="-1">类型</option>
              <option value="0">综合</option>
              <option value="1">机票</option>
              <option value="2">保险</option>
              <option value="3">酒店</option>
              <option value="4">旅游</option>
              <option value="5">火车票</option>
              <option value="6">用车</option>
            </select>
          </div>
          <div class="row mb-2">
            <select class="form-select ms-1" v-model.number="scStatus">
              <option value="-1">状态</option>
              <option value="0">停用</option>
              <option value="1">启用</option>
            </select>
          </div>
          <div class="row mb-2">
            <button
              type="button"
              class="btn btn-primary mb-2"
              @click.stop="search()"
            >
              查找
            </button>
            <button
              type="button"
              class="btn btn-secondary"
              @click.stop="reset0()"
            >
              重置
            </button>
          </div>
        </form>
      </div>
    </template>
    <template v-else>
      <div class="card-body">
        <button
          type="button"
          @click.stop="newSupplier()"
          class="btn btn-success"
        >
          新建
        </button>
        <button
          type="button"
          class="btn btn-primary float-end"
          @click.stop="showSearch()"
        >
          查找
        </button>
      </div>
      <table class="table table-striped table-hover table-sm">
        <thead>
          <tr>
            <th>名称</th>
            <th>拼音</th>
            <th>类型</th>
            <th class="d-none d-md-table-cell">备注</th>
            <th class="d-none d-md-table-cell">默认支付方式</th>
            <th class="d-none d-md-table-cell">状态</th>
            <th class="d-none d-md-table-cell"></th>
            <th class="d-none d-md-table-cell"></th>
            <th class="d-none d-md-table-cell">生成时间</th>
            <th class="d-none d-md-table-cell">修改时间</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="(info, index) in suppliers"
            :key="info.id"
            @click.stop="showDetail(info.id)"
          >
            <td>
              {{ info.name }}
              <template v-if="info.isBsp && info.status">
                <br />
                <span class="small text-danger"> (BSP自动开票) </span>
              </template>
            </td>
            <td>{{ info.pinyin }}</td>
            <td>{{ getTypeDesc(info.supplierType) }}</td>
            <td class="d-none d-md-table-cell">{{ info.remark }}</td>
            <td class="d-none d-md-table-cell">{{ info.paymentMethodName }}</td>
            <td class="d-none d-md-table-cell">
              <template v-if="info.status">
                <span class="text-success text-lg">启用</span>
              </template>
              <template v-else>
                <span class="text-danger">停用</span>
              </template>
            </td>
            <td class="d-none d-md-table-cell">
              <template v-if="info.isDefault && info.status"> 默认 </template>
              <template v-else-if="info.supplierType === 0 && info.status">
                <button
                  type="button"
                  class="btn btn-warning btn-sm"
                  @click.stop="setDefaultSupplier(info.id)"
                >
                  设为默认
                </button>
              </template>
            </td>
            <td class="d-none d-md-table-cell">
              <template v-if="info.isBsp && info.status">
                BSP开票
                <button
                  type="button"
                  class="btn btn-danger btn-sm"
                  @click.stop="setBspSupplier(info.id, 0)"
                >
                  取消
                </button>
              </template>
              <template v-else-if="info.supplierType === 1 && info.status">
                <button
                  type="button"
                  class="btn btn-warning btn-sm"
                  @click.stop="setBspSupplier(info.id, 1)"
                >
                  设为BSP开票
                </button>
              </template>
            </td>
            <td class="d-none d-md-table-cell">{{ info.createTime }}</td>
            <td class="d-none d-md-table-cell">{{ info.lastUpdate }}</td>
            <td>
              <!-- <button class="btn btn-info btn-sm" @click.stop="editSupplier(index)">修改</button> -->
              <i class="mdi mdi-arrow-right fa-2"></i>
            </td>
          </tr>
        </tbody>
      </table>
      <nav id="pagination-box" class="float-end">
        <my-pagination
          name="pagination"
          :row-count="sc.rowCount"
          :page-total="sc.pageTotal"
          :page-no="sc.pageNo"
          @next-page="nextPage"
          @prev-page="prevPage"
          @direct-page="directPage"
        ></my-pagination>
      </nav>
    </template>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import MyPagination from "@/components/my-pagination_h5.vue";
import $ from "jquery";
import {
  searchSuppliers,
  saveSupplier,
  searchPaymentMethods,
  updateDefaultSupplier,
  updateBspSupplier,
} from "@/api/basic-data.js";

export default {
  components: {
    MyPagination,
  },
  data() {
    return {
      isSearchMode: false,
      sc: {
        rowCount: 0,
        pageNo: 1,
        pageSize: 10,
        pageTotal: 0,
      },
      supplierType0: -1,
      name0: "",
      scStatus: -1,

      suppliers: [],
    };
  },
  computed: {
    isAdmin() {
      return this.$store.getters.isAdmin;
    },
  },
  mounted: function () {
    this.search();
    // this.searchPaymentMethods()
  },
  methods: {
    ...mapMutations(["showLoading", "hideLoading"]),
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    showDetail: function (id) {
      this.$router.push("/h5/supplier/" + id);
    },
    showSearch: function () {
      this.isSearchMode = true;
    },
    search: function () {
      this.isSearchMode = false;
      const params = {
        "sc.pageNo": this.sc.pageNo,
        "sc.pageSize": this.sc.pageSize,
        "sc.type": this.supplierType0,
        "sc.name": this.name0,
        "sc.status": this.scStatus,
      };

      this.showLoading();

      searchSuppliers(
        params,
        (v) => {
          this.suppliers = v.dataList;
          this.sc = v.page;
        },
        () => {
          this.hideLoading();
        }
      );
    },
    // searchPaymentMethods: function () {
    //   searchPaymentMethods({
    //     'sc.pageNo': 1,
    //     'sc.pageSize': 1000
    //   }, v => {
    //     this.pmList = v.dataList
    //   })
    // },
    reset0: function () {
      this.supplierType0 = -1;
      this.name0 = "";
      this.scStatus = -1;
    },
    newSupplier: function () {
      this.$router.push("/h5/supplier");
    },
    getTypeDesc: function (val) {
      switch (val) {
        case 0:
          return "综合";
        case 1:
          return "机票";
        case 2:
          return "保险";
        case 3:
          return "酒店";
        case 4:
          return "旅游";
        case 5:
          return "火车票";
      }
    },
    prevPage: function () {
      this.sc.pageNo = this.sc.pageNo - 1;
      if (this.sc.pageNo < 1) this.sc.pageNo = 1;
      this.search();
    },
    nextPage: function () {
      this.sc.pageNo = this.sc.pageNo + 1;
      this.search();
    },
    directPage: function (pageNo) {
      this.sc.pageNo = pageNo;
      this.search();
    },
  },
};
</script>
